:root:root {
  --animate-duration: 600ms;
  --animate-delay: 600ms;
}
.fade-enter,
.fade-appear {
  opacity: 0;
  // transform: translateX(100%);
}

.fade-enter-active,
.fade-appear-active {
  opacity: 1;
  // transform: translateX(0);
  transition: all 600ms;
}

.fade-exit {
  opacity: 1;
  // transform: translateX(0);
}

.fade-exit-active {
  opacity: 0;
  // transform: translateX(-100%);
  transition: all 600ms;
}

// 过渡针对于路由
.router-enter,
.router-appear {
  opacity: 0;
}

.router-enter-active,
.router-appear-active {
  opacity: 1;
  transition: all 600ms;
}

.router-exit {
  opacity: 1;
}

.router-exit-active {
  opacity: 0;
  transition: all 0ms;
}
